<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title><spring:message code="index.page.title" /></title>
		<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/script/jqueryui/1.10.4/css/redmond/jquery-ui-1.10.4.custom.min.css" />

		<script type="text/javascript" src="<%=request.getContextPath() %>/script/jquery/1.9.1/jquery.js" ></script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/script/jqueryui/1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
		
		<!-- bxSlider Javascript file -->
		<script src="<%=request.getContextPath() %>/script/bxslider/jquery.bxslider.min.js"></script>
		<!-- bxSlider CSS file -->
		<link href="<%=request.getContextPath() %>/script/bxslider/jquery.bxslider.css" rel="stylesheet" />

		<!-- add the jQWidgets framework -->
		<link rel="stylesheet" href="<%=request.getContextPath() %>/script/jqwidgets/styles/jqx.base.css" type="text/css" />
	    <link rel="stylesheet" href="<%=request.getContextPath() %>/script/jqwidgets/styles/jqx.arctic.css" type="text/css" />
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxcore.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxbuttons.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxscrollbar.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxlistbox.js"></script>
	    <script type="text/javascript" src="<%=request.getContextPath() %>/script/jqwidgets/jqxrating.js"></script>

	    <script type="text/javascript">
	    	var requestContextPath = "<%=request.getContextPath() %>";
	    	var productInCard = [
								<c:forEach var="cardItem" items="${sessionScope.cardItems}">
								<c:out value="${cardItem.key}" />,
								</c:forEach>
								0
	    	                    ];
	    </script>
		<script type="text/javascript" src="<%=request.getContextPath() %>/script/main.js"></script>
		<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/script/css/main.css" />
	</head>
	<body>
		
		<header>
			<table class="headertable">
				<tr>
					<td class="logotd">
						<div class="logo">
							Logo
						</div>
					</td>
					<td class="headersidebartd">
						<div class="headersidebar">
							<a href="index" class="aboutcontact">Home</a> <a href="aboutus" class="aboutcontact">AboutUs</a> <a href="contactus" class="aboutcontact">Contact</a>
							<select class="language">
								<option value="en_US">English</option>
								<option value="en_US">French</option>
							</select>
						</div>
					</td>
				</tr>
			</table>
		</header>
		
		<section>
			<table class="sectionmaintable">
				<tr>
					<td class="productssidebartd">
						<div class="cardmain">
							<img src="<%=request.getContextPath() %>/script/css/images/card.png" /><span class="mycard">MyCard(<span class="cardItemCount">0</span>)</span>
							<div style="overflow: hidden;">
							<div id="card">
								  No Items Added
							</div>
							</div>
							<div class="orderNowFromCardDiv">
								<input type="button" class="orderNowFromCard" name="orderNow" value="Order Now">
							</div>
						</div>
					</td>
					<td class="productstd">
							<div class="productinfo">
								<table class="productinfoTable">
									<tr>
										<td>
											<div class="productinfoImgDiv">
												<img src="${product.productImagesUrl[0]}" class="zoomThisImage" data-zoom-image="${product.productImagesUrl[0]}"/>
											</div>
										</td>
										<td>
											<div class="productinfoContentDiv">
												<div class="productinfoProductName">${product.name}</div>
												<div class="productrating"></div>
												<div class="productinfoProductPrice">&#8377; ${product.price}</div>
												<div class="productinfoButtonDiv">
													<input type="button" class="addToCard" name="addToCard" value="Add To Card" product-id="${product.id}" product-name="" product-img-url="${product.productImagesUrl[0]}">
													<input type="button" class="orderNow" name="orderNow" value="Order Now" product-id="${product.id}">
													<input type="button" class="backToProductList" name="backToProductList" value="Back To Products">
												</div>
											</div>
										</td>
									</tr>
									<tr>
										<td colspan="2"><hr /></td>
									<tr>
									<tr>
										<td colspan="2">
											<div class="review">
											</div>
										</td>
									</tr>
								</table>
							</div>
							<!-- <div></div> -->						
					</td>
				</tr>
			</table>
		</section>
		
		<footer>
			<div class="footerdiv">
				Thanks to <a href="https://code.google.com/p/onlineshopping4j">onlineshopping4j</a>
			</div>
		</footer>
	</body>
</html>